<template>
  <div class="plugin-main">
    <div class="header">
      <el-button type="primary" @click="handleOpenDialog()" class="add-botton">添加</el-button>
    </div>
    <div class="content-main">
      <ElRow class="mt-20px" :gutter="20" justify="space-between">
        <ElCol :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="mb-20px">
          <ElCard shadow="never">
            <template #header>
              <div class="flex justify-between">
                <span>前端插件</span>
                <ElLink type="primary" :underline="false">{{ t('workplace.more') }}</ElLink>
              </div>
            </template>
            <ElSkeleton :loading="loading" animated>
              <ElRow :gutter="10">
                <ElCol
                  class="mb-3"
                  v-for="(item, index) in projects"
                  :key="`card-${index}`"
                  :xl="4"
                  :lg="6"
                  :md="12"
                  :sm="24"
                  :xs="24"
                >
                  <ElCard shadow="hover">
                    <div class="flex items-center">
                      <Icon :icon="item.icon" :size="25" class="mr-10px" />
                      <span class="text-16px">{{ item.name }}</span>
                    </div>
                    <div class="mt-15px text-14px text-gray-400 introduction">
                      {{ t(item.message) }}
                    </div>
                    <div class="mt-20px text-12px text-gray-400 flex justify-between">
                      <span>{{ item.personal }}</span>
                      <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
                    </div>
                  </ElCard>
                </ElCol>
              </ElRow>
            </ElSkeleton>
          </ElCard>
        </ElCol>
      </ElRow>
    </div>
    <!-- 添加、编辑表单 -->
    <FormDialog v-model:dialogVisible="dialogVisible" />
  </div>
</template>

<script setup>
import { ref, unref, reactive, onMounted } from 'vue'
import {
  ElRow,
  ElCol,
  ElSkeleton,
  ElCard,
  ElDivider,
  ElLink,
  ElButton,
  ElDialog
} from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { formatTime } from '@/utils'
import {
  getCountApi,
  getProjectApi,
  getDynamicApi,
  getTeamApi,
  getRadarApi
} from '@/api/dashboard/workplace'
import { resData } from '@/viewspage/Plugin/data/index.js'
import FormDialog from '@/viewspage/Plugin/components/FormDialog.vue'

import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'

import { handleSwal } from '@/utils/swal.js'

const driverObj = driver({
  showProgress: true,
  steps: [
    {
      element: '.add-botton',
      popover: {
        title: 'Animated Tour Example',
        description: "Here is the code example showing animated tour. Let's walk you through it.",
        side: 'left',
        align: 'start'
      }
    },
    {
      element: 'code .line:nth-child(1)',
      popover: {
        title: 'Import the Library',
        description: 'It works the same in vanilla JavaScript as well as frameworks.',
        side: 'bottom',
        align: 'start'
      }
    },
    {
      element: 'code .line:nth-child(2)',
      popover: {
        title: 'Importing CSS',
        description: 'Import the CSS which gives you the default styling for popover and overlay.',
        side: 'bottom',
        align: 'start'
      }
    },
    {
      element: 'code .line:nth-child(4) span:nth-child(7)',
      popover: {
        title: 'Create Driver',
        description: 'Simply call the driver function to create a driver.js instance',
        side: 'left',
        align: 'start'
      }
    },
    {
      element: 'code .line:nth-child(18)',
      popover: {
        title: 'Start Tour',
        description: 'Call the drive method to start the tour and your tour will be started.',
        side: 'top',
        align: 'start'
      }
    },
    {
      element: 'a[href="/docs/configuration"]',
      popover: {
        title: 'More Configuration',
        description: 'Look at this page for all the configuration options you can pass.',
        side: 'right',
        align: 'start'
      }
    },
    {
      popover: {
        title: 'Happy Coding',
        description: 'And that is all, go ahead and start adding tours to your applications.'
      }
    }
  ]
})

const { t } = useI18n()

const loading = ref(true)
const dialogVisible = ref(false)
let projects = reactive([...resData])

// 获取项目数
const getProject = async () => {
  const res = await getProjectApi().catch(() => {})
  if (res) {
    projects = Object.assign(projects, res.data)
    projects = [...projects, ...projects, ...projects, ...projects]
    console.log(projects)
  }
}

const getAllApi = async () => {
  // await Promise.all([getProject()])
  loading.value = false
}

getAllApi()

function handleOpenDialog() {
  handleSwal()
  return
  dialogVisible.value = true
}

onMounted(() => {
  // driverObj.drive()
})
</script>

<style lang="less" scoped>
.plugin-main {
  // height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height));
  display: flex;
  width: 100%;
  // overflow-y: auto;
  flex-direction: column;

  .content-main {
    flex: 1;
  }
}

.introduction {
  display: -webkit-box;
  height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
